var app = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 1,
                name: '电子商品',
                conter: [
                    {
                        id: 1,
                        name: 'iPhone 7',
                        price: 6188,
                        count: 1
                    },
                    {
                        id: 2,
                        name: 'iPad Pro',
                        price: 5888,
                        count: 1
                    },
                    {
                        id: 3,
                        name: 'MacBook Pro',
                        price: 21488,
                        count: 1
                    },
                ]
            },
            {
                id: 2,
                name: '生活用品',
                conter: [
                    {
                        id: 4,
                        name: '牙刷',
                        price: 16,
                        count: 1
                    },
                    {
                        id: 5,
                        name: '杯子',
                        price: 58,
                        count: 1
                    },
                    {
                        id: 6,
                        name: '盆',
                        price: 15,
                        count: 1
                    }
                ]
            },
            {
                id: 3,
                name: '果蔬',
                conter: [
                    {
                        id: 7,
                        name: '苹果',
                        price: 5,
                        count: 1
                    },
                    {
                        id: 8,
                        name: '香瓜',
                        price: 8,
                        count: 1
                    },
                    {
                        id: 9,
                        name: '西瓜',
                        price: 30,
                        count: 1
                    }
                ]
            }

        ],
        arr: [],
        checkedList: false,
        checked: false
    },
    computed: {
        totalPrice: function () {
            var total = 0;
            for (var i = 0; i < this.conters.length; i++) {
                var item = this.conters[i];
                this.arr.forEach(function (items) {
                    if (items === item.id) {
                        total += item.price * item.count
                    }
                })
                //console.log(this.conters);

            }
            //total += item.price * item.count

            // for (var i = 0; i < this.list.length; i++) {
            //     var item = this.list[i];
            //     total += item.price * item.count
            // }
            return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')

        },
        conters: function () {
            var contArr = [];
            for (var i = 0; i < this.list.length; i++) {
                for (var j = 0; j < this.list[i].conter.length; j++) {
                    contArr.push(this.list[i].conter[j]);
                }

            }
            return contArr;
        }
    },
    methods: {
        handleReduce: function (indexs,index) {
            if (this.conters[index].count === 1) return;
            var lists = this.list[indexs].conter
            lists[index].count--;
            
        },
        handleAdd: function (indexs,index) {
            var lists = this.list[indexs].conter
            lists[index].count++;
            
        },
        handleRemove: function (indexs,index) {

            var lists = this.list[indexs].conter
                                      
            lists.splice(index, 1);
                             
        },
        conterArr: function () {
            var conterArr = [];
            for (var i = 0; i < this.list.length; i++) {
                for (var j = 0; j < this.list[i].conter.length; j++) {
                    conterArr.push(this.list[i].conter[j].id);
                }

            }
            return conterArr;
        },
        fn2() {

            if (this.arr.length + 1 == this.conterArr().length) {
                this.checked = true;
                this.checkedList = true;
            } else {
                this.checked = false;
                this.checkedList = false;
            }
            // if (this.arr.length + 1 === this.conters.length) {
            //     this.checked = true;
            // } else {
            //     this.checked = false;
            // }
            setTimeout(() => console.log(this.arr))
        },
        selectListAll: function () {
            for (var i = 0; i < this.list.length; i++) {
                // var s = this.list[i];
                // if(s.conter){
                return this.list[i].conter.forEach((item) => {
                    this.arr.push(item.id);
                    console.log(item.id);
                })
                //}
                // this.list.forEach((item) => {
                //     this.arr.push(item.id);
                //     console.log(item.id);
                // });
            }
            setTimeout(() => console.log(this.arr))
        },
        selectAll: function () {
            if (this.checked) {//实现反选
                this.arr = [];
            } else { //实现全选
                this.arr = [];

                this.conterArr().forEach((item) => {
                    this.arr.push(item);
                    console.log(item);
                });
            }
            setTimeout(() => console.log(this.arr))

        },
        // watch: { //深度 watcher
        //     arr: {
        //         handler: function (val, oldVal) {
        //             if (this.arr.length === this.list.length) {
        //                 this.checked = true;
        //             } else {
        //                 this.checked = false;
        //             }
        //         },
        //         deep: true
        //     }
        // },
        // controAll: function () {
        //     var checklists = document.getElementsByName('selected');
        //     var checkAllEle = document.getElementById('controlAll');
        //     for (var i = 0; i < checklists.length; i++) {
        //         if (checklists[i].checked == false) {
        //             checkAllEle.checked = false;
        //             return;
        //         } else {
        //             checkAllEle.checked = true;
        //         }
        //     }
        // }

    }
})